<template>
  <header class="header-bar">
    <div class="left">
      <router-link to="/select/location" class="toole">
        <icon name="loaction" :size="64" />
        <span>送至：{{location.name}}</span>
        <icon name="jiantouarrow487" :size="32" />
      </router-link>
    </div>
    <div class="right">
      <a href="javascript:;"  class="toole">
        <icon name="sousuo_1" />
      </a>
    </div>
  </header>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Headerbar',
  computed: {
    ...mapState('user', ['location'])
  }
}
</script>

<style lang="scss" scoped>
.header-bar {
  @include wh(100%, 98px);
  @include flex(row, space-between, center);
  background: #fff;
  padding-right: 20px;
  .toole {
    @include flex(row, space-between, center);
    color: #999;
    font-size: $font-size-s;
  }
}
</style>
